<template>
  <div class="notification-cover" @click="close">
  <div class="notification-wrap">   
    <div class="notication-title">{{ title }}</div>
    <div class="notication-content">{{ notification }}</div>
    <div class="notication-footer2" v-if="isWithdraw === 'twoCallback'">
      <span @click="close">取消</span>
      <span class="border-none" @click="submit">确定</span>
    </div>
    <div class="notication-footer1" v-else-if="isWithdraw === 'singleCallback'" @click="submit">确定</div>
    <div class="notication-footer1" v-else>确定</div>
  </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        msg: {
          response: '',
          tooltip: ''
        }
      };
    },
    methods: {
      close() {
        this.$emit('gettooltip', this.msg);
      },
      submit() {
        if (!this.isrouter) {
          this.msg.response = 'ok';
          this.$emit('gettooltip', this.msg);
        } else {
          this.$router.replace({path: '/#myself'});
          this.$router.push({path: this.isrouter, query: {order_id: this.query}});
        }
      }
    },
    props: ['notification', 'title', 'isWithdraw', 'isrouter', 'query']
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰 bg 
  主题 红 theme
  辅助 蓝 assist */
  .notification-cover
    height 100%
    width 100%
    background-color rgba(33,33,33,0.8)
    position fixed
    top 0px
    z-index 1000
  .notification-wrap
    width: 280px
    margin 0 auto
    margin-top 40%
    .notication-title
      background-color: white;
      height: 45px;
      line-height: 60px;
      font-size: 18px;
      text-align: center;
      color: rgb(33,33,33)
      border-radius: 10px 10px 0 0;
      font-weight bold
    .notication-content
      color: rgb(114,114,114);
      min-height: 30px;
      text-align: center;
      line-height: 25px;
      padding 12px 33px 14px 33px
      font-size: 15px;
      background-color: #fff;
      position: relative;
      border-1px($border)
    .notication-footer1
      background-color: $bg-white
      height: 45px
      line-height: 45px
      font-size: 18px
      text-align: center 
      color: $theme
      border-top none
      border-radius 0 0 10px 10px
    .notication-footer2
      background-color: $bg-white
      height: 45px
      line-height: 45px
      font-size: 18px
      text-align: center 
      color: $theme
      border-top none
      border-radius 0 0 10px 10px
      .border-none
        border none
      span
        display inline-block
        width 50%
        text-align center
        float left
        box-sizing border-box
        border-right 1px solid $border
</style>